import React, { useEffect, useState, useRef } from 'react'
import classNames from 'classnames'
import { Header, AlertTip } from 'src/components'
import { checkExsis, getcaptchas, changePassword } from 'src/api/getData'
import './index.scss'

// 忘记密码
const Forget = () => {

    const [phoneNumber, setPhoneNumber] = useState()
    const [oldPassWord, setOldPassWord] = useState()
    const [newPassWord, setNewPassWord] = useState()
    const [rightPhoneNumber, setRightPhoneNumber] = useState(false)
    const [confirmPassWord, setConfirmPassWord] = useState()
    const [captchaCodeImg, setCaptchaCodeImg] = useState()
    const [mobileCode, setMobileCode] = useState()
    const [computedTime, setComputedTime] = useState(0)
    const [showAlert, setShowAlert] = useState(false)
    const [alertText, setAlertText] = useState()
    // const [accountType, setAccountType] = useState('mobile')
    const accountType = 'mobile'
    // const [validate_token, setValidateToken] = useState()

    const timerRef = useRef(null)
    useEffect(() => {
        getCaptchaCode()
    }, [])

    //判断输入的电话号码
    const inputPhone = (value) => {
        if (/.+/gi.test(value)) {
            setRightPhoneNumber(true)
        } else {
            setRightPhoneNumber(false)
        }
    }

    //获取验证吗
    const getVerifyCode = async () => {
        if (rightPhoneNumber) {
            setComputedTime(30)
            //倒计时
            timerRef.current = setInterval(() => {
                setComputedTime(computedTime - 1)
                if (computedTime === 0) {
                    clearInterval(timerRef.current)
                }
            }, 1000)
            //判断用户是否存在
            let res = await checkExsis(phoneNumber, accountType);
            //判断返回的信息是否正确，用户是否注册
            if (res.message) {
                setShowAlert(true)
                setAlertText(res.message)
                return
            } else if (!res.is_exists) {
                setShowAlert(true)
                setAlertText('您输入的手机号尚未绑定')
                return
            }
            //获取验证信息
            let getCode = await mobileCode(phoneNumber);
            if (getCode.message) {
                setShowAlert(true)
                setAlertText(getCode.message)
                return
            }
            // setValidateToken(getCode.validate_token)
        }
    }
    const getCaptchaCode = async () => {
        let res = await getcaptchas();
        setCaptchaCodeImg(res.code)
    }
    //重置密码
    const resetButton = async () => {
        if (!phoneNumber) {
            setShowAlert(true)
            setAlertText('请输入正确的账号')
            return
        } else if (!oldPassWord) {
            setShowAlert(true)
            setAlertText('请输入旧密码')
            return
        } else if (!newPassWord) {
            setShowAlert(true)
            setAlertText('请输入新密码')
            return
        } else if (!confirmPassWord) {
            setShowAlert(true)
            setAlertText('请输确认密码')
            return
        } else if (newPassWord !== confirmPassWord) {
            setShowAlert(true)
            setAlertText('两次输入的密码不一致')
            return
        } else if (!mobileCode) {
            setShowAlert(true)
            setAlertText('请输验证码')
            return
        }
        // 发送重置信息
        let res = await changePassword(phoneNumber, oldPassWord, newPassWord, confirmPassWord, mobileCode);
        if (res.message) {
            setShowAlert(true)
            setAlertText(res.message)
            getCaptchaCode()
            return
        } else {
            setShowAlert(true)
            setAlertText('密码修改成功')
        }
    }
    const onClose = () => {
        setShowAlert(false)
    }

    return <div className="page_forget">
        <Header title="重置密码" goBack></Header>
        <form className="restForm">
            <section className="input_container phone_number">
                <input type="text" placeholder="账号" name="phone" maxLength="11"
                    value={phoneNumber}
                    onInput={(e) => {
                        setPhoneNumber(e.target.value)
                        inputPhone(e.target.value)
                    }}
                />
                {
                    !computedTime && <button onClick={getVerifyCode} className={classNames({ right_phone_number: rightPhoneNumber })}>获取验证码</button>
                }
                {
                    !!computedTime && <button>已发送({{ computedTime }}s)</button>
                }
            </section>
            <section className="input_container">
                <input type="text" placeholder="旧密码" name="oldPassWord"
                    value={oldPassWord}
                    onInput={(e) => setOldPassWord(e.target.value)}
                />
            </section>
            <section className="input_container">
                <input type="text" placeholder="请输入新密码" name="newPassWord"
                    value={newPassWord}
                    onInput={(e) => setNewPassWord(e.target.value)}
                />
            </section>
            <section className="input_container">
                <input type="text" placeholder="请确认密码" name="confirmPassWord"
                    value={confirmPassWord}
                    onInput={(e) => setConfirmPassWord(e.target.value)}
                />
            </section>
            <section className="input_container captcha_code_container">
                <input type="text" placeholder="验证码" name="mobileCode" maxLength="6"
                    value={mobileCode}
                    onInput={(e) => setMobileCode(e.target.value)}
                />
                <div className="img_change_img">
                    {captchaCodeImg && <img src={captchaCodeImg} alt="" />}
                    <div className="change_img" onClick={getCaptchaCode}>
                        <p>看不清</p>
                        <p>换一张</p>
                    </div>
                </div>
            </section>
        </form>
        <div className="login_container" onClick={resetButton}>确认修改</div>
        {
            showAlert && <AlertTip showHide={showAlert} onClose={onClose} alertText={alertText}></AlertTip>
        }
    </div>
}

export default Forget